<div class="panel panel-default">
    <div class="panel-heading">订单进度（多维统计）</div>
    <div class="panel-body">
        <!-- 多维度筛选表单 -->
        <form method="get" class="form-inline mb-3">
            <select name="order_id" class="form-control input-sm">
                <option value="">全部订单</option>
                {volist name="orderList" id="order"}
                <option value="{$order.id}" {if $orderId==$order.id}selected{/if}>{$order.order_no}</option>
                {/volist}
            </select>
            <select name="product_id" class="form-control input-sm">
                <option value="">全部产品</option>
                {volist name="productList" id="product"}
                <option value="{$product.id}" {if $productId==$product.id}selected{/if}>{$product.name}</option>
                {/volist}
            </select>
            <select name="process_id" class="form-control input-sm">
                <option value="">全部工序</option>
                {volist name="processList" id="process"}
                <option value="{$process.id}" {if $processId==$process.id}selected{/if}>{$process.name}</option>
                {/volist}
            </select>
            <button type="submit" class="btn btn-primary btn-sm">筛选</button>
        </form>

        <!-- 工序进度统计图表 -->
        <script>
        window.processStatsData = [
            {volist name="processStats" id="row" key="k"}
            {
                process_name: '{$row.process_name}',
                total_quantity: {$row.total_quantity},
                reported_quantity: {$row.reported_quantity},
                completion_rate: {$row.completion_rate}
            }{if $k != count($processStats)} , {/if}
            {/volist}
        ];
        </script>
        <div id="echarts-process-progress" style="width:100%;height:400px;"></div>
        <script src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"></script>
        <script>
        var processChart = echarts.init(document.getElementById('echarts-process-progress'));
        var processData = window.processStatsData.filter(function(item){return item.process_name;});
        var processOption = {
            title: {text: '工序进度统计', left: 'center'},
            tooltip: {trigger: 'axis'},
            legend: {data: ['分配数量', '已报数量', '完成率'], top: 30},
            xAxis: {type: 'category', data: processData.map(function(r){return r.process_name;})},
            yAxis: [
                {type: 'value', name: '数量'},
                {type: 'value', name: '完成率(%)', min: 0, max: 100, position: 'right'}
            ],
            series: [
                {name: '分配数量', type: 'bar', data: processData.map(function(r){return r.total_quantity;})},
                {name: '已报数量', type: 'bar', data: processData.map(function(r){return r.reported_quantity;})},
                {name: '完成率', type: 'line', yAxisIndex: 1, data: processData.map(function(r){return r.completion_rate;})}
            ]
        };
        processChart.setOption(processOption);
        </script>

        <!-- 工序进度表格 -->
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>工序</th>
                    <th>分配数量</th>
                    <th>已报数量</th>
                    <th>完成率</th>
                </tr>
            </thead>
            <tbody>
            {volist name="processStats" id="row"}
                <tr>
                    <td>{$row.process_name}</td>
                    <td>{$row.total_quantity}</td>
                    <td>{$row.reported_quantity}</td>
                    <td>{$row.completion_rate}%</td>
                </tr>
            {/volist}
            </tbody>
        </table>

        <!-- 原有多层表格 -->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>订单号</th>
                    <th>产品</th>
                    <th>型号</th>
                    <th>工序</th>
                    <th>员工</th>
                    <th>报工数</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
            {volist name="orderStats" id="order"}
                {volist name="order.products" id="product"}
                    {volist name="product.processes" id="process"}
                        {volist name="process.users" id="user"}
                        <tr>
                            <td>{$order.order_no}</td>
                            <td>{$product.product_name}</td>
                            <td>{$product.model_name}</td>
                            <td>{$process.process_name}</td>
                            <td>{$user.user_name}</td>
                            <td>{$user.quantity}</td>
                            <td>{$user.status_text}</td>
                        </tr>
                        {/volist}
                    {/volist}
                {/volist}
            {/volist}
            </tbody>
        </table>
    </div>
</div> 